<template>
    <div>
        <Table border :columns="columns" :data="records"></Table>

        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" :current="current" show-sizer show-total @on-change="getPage"
                      @on-page-size-change="getPageSize"/>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "option1",
        data() {
            return {
                current: 1,
                size: 10,
                total: 0,
                columns: [
                    {
                        title: '权限代码',
                        key: 'pcode',
                        align: 'center',
                    },
                    {
                        title: '权限名称',
                        key: 'pname',
                        align: 'center',
                    },

                    {
                        title: '描述',
                        key: 'describe',
                        align: 'center',
                    },
                    {
                        title: 'URL',
                        key: 'purl',
                        align: 'center',
                    },
                    {
                        title: '类型',
                        key: 'ptype',
                        align: 'center',
                    },
                    {
                        title: '分组',
                        key: 'groupName',
                        align: 'center',
                    },
                    {
                        title: '状态',
                        key: 'isOpen',
                        align: 'center',
                        render: (h, obj) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: "开启" == obj.row.isOpen ? "error" : "primary",
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            let self = this;
                                            self.isOpenPermission(obj.row);

                                        }
                                    }

                                }, "开启" == obj.row.isOpen ? "关闭" : "开启")
                            ])

                        }
                    },
                ],
                records: []
            }
        },
        methods: {
            getData() {
                var self = this;
                this.$http.get('/core/permissionInfo/queryPermissionPage', {
                    params: {
                        current: this.current,
                        size: this.size
                    }
                }).then(function (response) {
                    var data = self.common.handleData(response.data, self);
                    self.records = data.records;
                    self.total = data.total;
                    self.current = data.current;
                });
            },
            getPage(value) {
                this.current = value;
                this.getData();
            },
            getPageSize(value) {
                this.size = value;
                this.getData();
            },
            isOpenPermission(row) {
                var self = this;
                this.$http({
                    method: 'post',
                    url: '/core/permissionInfo/openPermission',
                    data: {
                        pid: row.pcode,
                        isOpen: row.isOpen === '开启' ? '关闭' : '开启'
                    }
                }).then(function (response) {
                    self.getData();
                }).catch(function (error) {
                    console.log(error);
                });


            },
        },
        mounted() {
            this.getData();
        }
    }
</script>

<style scoped>

</style>